<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
         #nav * {
             margin: 0;
             padding: 0;
             font: normal 12px/25px simsun;
         }

         #nav ul {
             list-style: none;
             height: 25px;
         }

         #nav li {
             float: left;
             width: 86px;
             height: 25px;
             text-align: center;
             margin: 0 -5px;
         }

         #nav a {
             display: block;
             position: relative;
             height: 25px;
             color: #FFFFFF;
             background: url(btn2.gif) center center no-repeat;
         }

         #nav a:hover {
             position: relative;
             z-index: 2;
             color: #000000;
             background: url(btn1.gif) 0 0 no-repeat;
         }
        </style>
    </head>
    <body>
        <map id="nav">
            <ul>
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
                <li><a href="#">导航5</a></li>
                <li><a href="#">导航6</a></li>
                <li><a href="#">导航7</a></li>
                <li><a href="#">导航8</a></li>
            </ul>
        </map>
    </body>
</html>
